<template>
  <div>
    <div
      class="text-center text-12 mb-26 flex js-sp radius-50"
      :class="state.doTab === 1 ? 'border-green-1' : 'border-red-1'"
    >
      <div
        class="btn"
        :class="
          state.doTab === 1 ? 'green-bg share-color' : 'text-noactive-icon'
        "
        @click="changeDotab(1)"
      >
        <!-- {{ isRestDate ? $t("stock.closed") : $t("exchange.doMore") }} -->
        {{ $t("exchange.doMore") }}
      </div>
      <div
        class="btn"
        :class="state.doTab === 2 ? 'red-bg share-color' : 'text-noactive-icon'"
        @click="changeDotab(2)"
      >
        <!-- {{ isRestDate ? $t("stock.closed") : $t("exchange.short") }} -->
        {{ $t("exchange.short") }}2222222222222222------------
      </div>
    </div>
    <!-- <div class="flex js-sp mb-12" v-if="islogin">
      <div class="text-10">
        <span class="quotet3" style="margin-inline-end:8px">
          {{ $t("deal.available") }}
        </span>
        <span class="family-d color_42 text-bolder"
          >{{ $currency(state.leverInfo?.lever_balance) }} USDT</span
        >
      </div>
      <img
        v-if="!virtual_wallet"
        @click="state.dialogHuazhuan = true"
        src="@/assets/images/order.png"
        class="order-icon"
        alt
      />
    </div> -->
    <!-- <div
      class="cus-select quoteline radius flex js-sp align-center mb-20"
      @click="state.isSelect = !state.isSelect"
      v-clickout="closeSelect"
    >
      <span class="quotet3">{{ $t("lever.multiple") }}</span>
      <div class="select-num">
        <span class="family-d quotet3 text-12"
          >{{ state.orderParam.lever_multiple }}X</span
        >
        <i
          class="el-icon-arrow-down quotet2 text-14"
          v-if="!state.isSelect"
        ></i>
        <i class="el-icon-arrow-up quotet2 text-14" v-else></i>
        <ul class="num-box quotebg radius" v-if="state.isSelect">
          <li
            class="num quotet2 text-14"
            v-for="(item, index) in gettrading.lever_multiple_array"
            :key="index"
            @click.stop="selectMulti(item)"
          >
            {{ item }}X
          </li>
        </ul>
      </div>
    </div> -->
    <ul class="tabbox flex js-st quotet3 text-12 text-bold point mb-12">
      <li
        class="tab"
        v-for="item in state.tabBox"
        :class="{ 'quotet2 activetab': state.activeTab === item.id }"
        @click="changeTab(item.id)"
        :key="item.id"
      >
        {{ item.name }}
      </li>
    </ul>
    <div class>
      <!-- 限价交易 -->
      <Limit
        :doTab="state.doTab"
        :activeTab="state.activeTab"
        :leverInfo="state.leverInfo"
        :nowprice="nowprice"
        :islogin="islogin"
        @placeOrder="getleverInfo"
        :lever_multiple="state.orderParam.lever_multiple"
        @getleverInfo="getleverInfo"
        @refresh="holdRefresh"
        :isRestDate="isRestDate"
      />
    </div>
  </div>
  <div>
    <el-dialog
      :title="state.content.protocol_title"
      v-if="state.dialogOpen"
      v-model="state.dialogOpen"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
    >
      <div
        class="text-left content-box text-14 color_42"
        v-html="state.content.protocol_content"
      ></div>
      <Openlever @openlever="openlever" />
    </el-dialog>
  </div>
  <el-dialog
    :title="$t('assets.fundTransfer')"
    v-if="state.dialogHuazhuan"
    v-model="state.dialogHuazhuan"
    width="400px"
  >
    <Huazhuan
      :downplace="true"
      :type="2013"
      @close="state.dialogHuazhuan = false"
      @getbalance="getleverInfo"
    />
  </el-dialog>
</template>

<script>
import { reactive, watch, computed, onMounted, onBeforeUnmount } from "vue";
import Limit from "./lever-limit.vue";
import { useStore } from "vuex";
import Openlever from "./lever-open.vue";
import { getProtocol } from "@/api/article";
import { stockOrderLeverInfo } from "@/api/stock-trading";
import { demostockOrderLeverInfo } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { useI18n } from "vue-i18n";
import Huazhuan from "@/components/personModel/assets/huazhuan.vue";
import { LoginInterception } from "@/utils/common";
import useProtocolSetting from "@/commonapi/useProtocolSetting";
export default {
  components: { Limit, Openlever, Huazhuan },
  emits: ["refresh"],
  props: { nowprice: Number, isRestDate: Boolean },
  setup(props, { emit }) {
    const $store = useStore();
    const { t } = useI18n();
    const state = reactive({
      isSelect: false,
      activeTab: 2,
      tabBox: [
        { name: t("exchange.limitPrice"), id: 2 },
        { name: t("exchange.marketPrice"), id: 1 },
        // { name: t("newTheme.PlanPriceLimit"), id: 3 }
      ],
      dialogHuazhuan: false,
      isopenlever: $store.state.user.userInfo
        ? $store.state.user.userInfo?.user_stock_lever_status
        : false,
      leverInfo: null, //合约交易信息
      loading: false,
      timer: null,
      orderParam: { lever_multiple: 0 },
      content: {},
      dialogOpen: false,
      doTab: 1,
    });
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    const islogin = computed(() => {
      return $store.state.user.token ? true : false;
    });
    const gettrading = computed(() => {
      return $store.state.exchange.stock_lever_data;
    });
    watch(
      () => virtual_wallet.value,
      () => {
        getleverInfo();
      }
    );
    watch(
      () => gettrading.value?.id,
      () => {
        getleverInfo();
        if (gettrading.value?.lever_multiple_array) {
          state.orderParam.lever_multiple =
            gettrading.value?.lever_multiple_array[0];
        }
      }
    );
    const openlever = () => {
      state.isopenlever = true;
      state.dialogOpen = false;
    };
    /**
     * methods
     */
    // 获取协议状态
    const { open_stock_contract_trading } = useProtocolSetting();
    onMounted(() => {
      LoginInterception("/stockLever").then(() => {
        state.timer = setInterval(() => {
          getleverInfo();
        }, 5000);
        getleverInfo();
        if (open_stock_contract_trading.value) {
          getOpenContract();
          state.dialogOpen = !state.isopenlever;
        }
      });
      if (gettrading.value?.lever_multiple_array) {
        state.orderParam.lever_multiple =
          gettrading.value?.lever_multiple_array[0];
      }
    });
    const getOpenContract = () => {
      const data = {
        protocol_type_tag: "open_stock_contract_trading",
      };
      getProtocol(data).then((res) => {
        state.content = res.data;
      });
    };
    const closeSelect = () => {
      state.isSelect = false;
    };
    // 选择倍数
    const selectMulti = (item) => {
      state.orderParam.lever_multiple = item;
      closeSelect();
    };
    // 获取合约交易信息
    const getleverInfo = () => {
      if (!islogin.value) {
        return;
      }
      if (gettrading.value?.id) {
        let setFun = virtual_wallet.value
          ? demostockOrderLeverInfo
          : stockOrderLeverInfo;
        setFun(gettrading.value.id)
          .then((res) => {
            state.leverInfo = res.data;
          })
          .catch((err) => {
            console.log(err);
            if (state.timer) {
              clearInterval(state.timer);
              state.timer = null;
            }
            // if (err.code === 62013) {
            //   $store.commit("exchange/SET_STOCK_LEVER_ID", 0);
            //   $store.commit("exchange/SET_STOCK_LEVER", null);
            // }
          });
      }
    };
    // 切换tab
    const changeTab = (i) => {
      state.activeTab = i;
    };
    // 页面卸载
    onBeforeUnmount(() => {
      if (state.timer) {
        clearInterval(state.timer);
      }
    });
    const holdRefresh = () => {
      emit("refresh");
    };
    const changeDotab = (val) => {
      state.doTab = val;
    };
    return {
      state,
      islogin,
      changeTab,
      closeSelect,
      selectMulti,
      getleverInfo,
      gettrading,
      getOpenContract,
      openlever,
      holdRefresh,
      changeDotab,
      open_stock_contract_trading,
      virtual_wallet,
    };
  },
};
</script>

<style scoped lang="less">
.mb-26 {
  margin-bottom: 26px;
}
.mb-12 {
  margin-bottom: 12px;
}
.tabbox {
  padding: inherit;
  // border-bottom: 1px solid;
}
.tab {
  min-height: 21px;
  line-height: 21px;
  position: relative;
  text-align: start;
  margin-inline-end: 20px;
  padding: 2px 4px;
}
.cus-select {
  width: 100%;
  height: 34px;
  border: 1px solid;
  padding: 0 8px;
}
.select-num {
  height: 100%;
  line-height: 32px;
  position: relative;
}
.num-box {
  position: absolute;
  top: 35px;
  right: -8px;
  width: 82px;
  padding: 10px;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);
  z-index: 100000;
}
.num {
  height: 36px;
  line-height: 36px;
  width: 100%;
}
.num:hover {
  background: #f8f8f8;
}
.content-box {
  width: 100%;
  padding: 10px;
  overflow-y: scroll;
  height: 300px;
}
</style>
<style lang="less">
.el-slider__button {
  border: 2px solid @slider;
  background-color: @red;
}
.el-slider__bar {
  background-color: @red;
}
.order-icon {
  width: 15px;
  height: 12px;
}
.btn {
  width: 100%;
  border-radius: 100px;
  height: 36px;
  line-height: 36px;
}
</style>
